<template>
  <div v-show="isShow" class="toast">
    {{message}}
  </div>
</template>
<script>
export default {
  name:'Toast',
  data() {
    return {
      isShow:false,
      message:'',
    }
  },
  methods: {
    showToast(mes,duration){
      this.isShow=true;
      this.message=mes;
      setTimeout(() => {
        this.isShow=false;
        this.message='';

      }, duration);
    }
  },
}
</script>
<style scoped>
.toast{
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color: rgba(0,0,0,.3);
  z-index: 99;
  padding: 8px 10px;
  color: aliceblue;
}
</style>